<template>
	<view>
		<!-- 搜索 -->
		<u-sticky offset-top="0" :customNavHeight="0">
			<view class="flex align-center flex-between padding-sm" style="background-color: #f4f4f4;">
				<view class="flex align-center"  @click="detail_address">
					<text class="text-lg margin-right-xs">{{address}}</text>
					<u-icon name="arrow-down" color="#999999"></u-icon>
				</view>
				
				<view class="flex flex-between flex-sub margin-lr-sm select-box bg-white padding-left-sm">
					<u-icon name="search" size="50rpx" color="#999999"></u-icon>
					<u--input placeholder="请输入搜索内容..." border="none" class="flex-sub margin-left-xs"></u--input>
					<u-button color="#ea3457" type="primary" shape="circle" text="搜索"
						:customStyle="{width:'120rpx',height: '68rpx', 'margin-left': '16rpx'}">
					</u-button>
				</view>
				<u-icon @click="routerGo('/pages/news/index')" name="chat" size="60rpx" color="#999999"></u-icon>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
			<!-- 轮播图 -->
			<view class="padding-lr margin-top-xs">
				<u-swiper :list="swiperList" height="360rpx" @change="e => current = e.current">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>

			<!-- 课程类型 -->
			<view class="radius-lg bg-white margin padding-top">
				<u-grid :border="false" col="5">
					<u-grid-item @click="routerGo(listItem)" v-for="(listItem,Index) in kcTypeList"
						:key="Index">
						<u--image :showLoading="true" :src="listItem.Picture" width="72rpx" height="72rpx"></u--image>
						<text class="grid-text text-sm margin-top-xs margin-bottom">{{listItem.Name}}</text>
					</u-grid-item>
				</u-grid>
			</view>

			<!-- 推荐 -->
			<view class="padding-left">
				<u-scroll-list indicatorWidth="0">
					<view class="margin-right-sm" v-for="(item, index) in recommendList" :key="index">
						<view class="bg-white radius-lg padding"
							style="width: 640rpx; position: relative; overflow: hidden;">
							<view class="flex align-center padding-right-xl">
								<view class="text-bold text-cut text-lg">钢琴大师在线教导训练营</view>
								<view
									class="recommend-tap text-white text-sm flex align-center justify-center margin-left">
									兴趣
								</view>
							</view>
							<view class="flex flex-between margin-top">
								<view class="flex align-center">
									<u-avatar size="50rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
									<text class="margin-left-sm">王勇</text>
								</view>
								<view class="">
									已报名
									<text class="text-red">1268</text>
									人
								</view>
							</view>
							<view class="tj-box bg-red text-sm flex align-center justify-center">
								推荐
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<!-- 课程列表 -->
			<view class="margin-lr bg-white radius-lg padding-lr-sm padding-bottom" style="margin-top: -30rpx">
				<u-tabs :list="curriculumTypeList" lineWidth="20" lineHeight="7"
					:lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
				        color: '#ea3457',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#333',
				        transform: 'scale(1)'
				    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
				</u-tabs>

				<view @tap="$routerGo('/pages/mechanism/index')" class="margin-top-lg padding-lr-xs"
					v-for="(item,index) in 3" :key="index">
					<view class="flex align-center">
						<u--image :showLoading="true" radius="10rpx"
							:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="160rpx"
							height="160rpx"></u--image>
						<view class="flex-sub margin-left-sm">
							<view class="flex">
								<view class="text-cut text-lg text-bold" style="flex: 0 0 380rpx; width: 380rpx;">
									凡尔赛钢琴大师</view>
								<view class="margin-left">
									<u-icon name="more-dot-fill" color="#999999"></u-icon>
								</view>
							</view>

							<view class="margin-top-xs flex align-center">
								<view class="text-red padding-right">评价：5.0</view>
								<view class="padding-left solid-left">
									销量：150
								</view>
							</view>

							<view class="flex flex-between margin-top-sm">
								<view class="flex align-center">
									<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
									<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
										青秀区秦汉胡同国学书院3栋108室
									</view>
								</view>
								<text class="margin-left-sm">
									42.2KM
								</text>
							</view>
						</view>
					</view>

					<view class="flex align-center margin-top-sm">
						<view class="text-center" style="flex: 0 0 160rpx">
							<view class="text-red text-bold">
								￥1
							</view>
							<view class="text-sm text-gray">
								门市价:￥9.9
							</view>
						</view>
						<view class="margin-left-sm">
							<view class="text-black text-lg text-cut" style="width: 450rpx;">
								成人/少儿钢琴1对1体验课
							</view>
							<view class="text-gray text-sm">
								年售卖20
							</view>
						</view>
					</view>
					<view class="flex align-center margin-top-sm">
						<view class="text-center" style="flex: 0 0 160rpx">
							<view class="text-red text-bold">
								￥209
							</view>
							<view class="text-sm text-gray">
								门市价:￥9999
							</view>
						</view>
						<view class="margin-left-sm">
							<view class="text-black text-lg text-cut" style="width: 450rpx;">
								成人/少儿钢琴1对1体验课成人/少儿钢琴1对1体验课
							</view>
							<view class="text-gray text-sm">
								年售卖20
							</view>
						</view>
					</view>

					<view class="flex justify-center text-gray margin-top-sm">
						更多显示
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>

			<!-- 暂无内容 -->
			<u-empty v-if="false" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</mescroll-body>

		<!-- 占位 -->
	 	<!-- <view class="cu-tabbar-height"></view> -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				sysUserName:'',
				sysUserAvatar:'',
				address:'',
				latitude:'',
				longitude:'',
				searchword: '', //搜索关键字
				list: [],
				// 上拉加载的配置(可选)
				upOption: {
					use: true, //是否启用上拉加载
				},

				//轮播图
				swiperList: ['/static/img/banner.png', '/static/img/banner.png'],
				current: 0,

				//课程分类
				kcTypeList: [],

				//推荐
				recommendList: 4,

				//课程分类列表
				curriculumIndex: 0,
				curriculumTypeList: [{
					name: '附近机构'
				}, {
					name: '规划师',
				}, {
					name: '推荐',
				}, {
					name: '课程'
				}, {
					name: '钢琴课'
				}, {
					name: '体育'
				}, {
					name: '文化'
				}, {
					name: '主持'
				}, {
					name: '编程'
				}],
			}
		},

		onLoad() {
			
			let urlkc='/GetCourseListInfo/'
			
			this.$H.post(urlkc).then(res =>{
					console.log(res.code);
					if(res.code==200)
					{
						this.kcTypeList = res.data;
						console.log(this.kcTypeList);
					}
				})
			// #ifdef APP-PLUS
			// APP检查更新(不是开发模式下)
			// this.$store.dispatch('user/appUpdate')
			// #endif
		},
		onShow() {

		},
		methods: {
			//切换Tab
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			},
			
			//路由跳转
			routerGo(listItem){
				console.log(listItem.CourID);
				if(listItem.Name == '规划') {
					this. $routerGo(`/pages/index/curriculum-list?courid=${listItem.CourID}&&name=${listItem.Name}&&usertype=${this.sysUserAvatar}&&tokenid=${this.sysUserName}`)
				}else {
					this. $routerGo(`/pages/index/curriculum-list2?name=${listItem.Name}`)
				}
			},
			
			//获取商品列表
			getList(page) {
				const params = {
					currentPage: page,
					pageSize: 20,
					searchword: this.searchword
				}
				this.$http.post('/api/Users/GetCBFBusiness', params).then(res => {

					if (page == 1) this.list = []; //如果是第一页需手动置空列表

					this.list = [...this.list, ...res.list] //合并数据

					setTimeout(() => {
						this.mescroll.endBySize(res.list.length, res.pageTotal); // 请求成功,隐藏加载状态
					}, 400)
				}).catch(() => {
					this.mescroll.endErr(); // 请求失败,隐藏加载状态
				})
			},
			//搜索
			search() {
				this.list = []
				this.mescroll.resetUpScroll();
			},

			//清除搜索框
			clear() {
				this.searchword = ''
			},

			//点击搜索发现
			tagClick(value) {
				this.list = []
				this.searchword = value
				this.mescroll.resetUpScroll();
			},

			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
			
			detail_address(){
				type: 'wgs84',
				uni.chooseLocation({
					 success: res => {
						  console.log(res);
					            console.log('位置名称：' + res.name);
					            console.log('详细地址：' + res.address);
					            console.log('纬度：' + res.latitude);
					            console.log('经度：' + res.longitude);
					            this.address = res.name
								}
				});
			},
		},
		
		mounted() {
			if(typeof sessionStorage !== 'undefined')
			{
				var user = sessionStorage.getItem('login');
				var userlogin = sessionStorage.getItem('userlogin');
			}
			
			
			console.log(user);
			console.log(userlogin);
			if (user) {
						user = JSON.parse(user);
						console.log(user);
						for (var i = 0; i < user.length; i++) {
						 console.log(user[i].TockenID + " " + user[i].Usertype);
						this.sysUserName = user[i].TockenID ;
						this.sysUserAvatar = user[i].Usertype;
						}	
						console.log(this.sysUserAvatar + " ;  "+this.sysUserName);
					}else if(userlogin){
						userlogin = JSON.parse(userlogin);
						console.log(userlogin);
						for (var j = 0; j < userlogin.length; j++) {
						 console.log(userlogin[j].TockenID + " " + userlogin[j].Usertype);
						this.sysUserName = userlogin[j].TockenID ;
						this.sysUserAvatar = userlogin[j].Usertype;
						}	
						console.log(this.sysUserAvatar + " ;  "+this.sysUserName);
					}
			 uni.getLocation({
			      type: 'gcj02',
			      success: (res) => {
					  console.log(res);
					  this.latitude=res.latitude;
					  this.longitude=res.longitude;
					  console.log(this.latitude);
					  uni.request({
					  	url: 'https://apis.map.qq.com/ws/geocoder/v1/',
					  	data: {
					  	  location: `${this.latitude},${this.longitude}`,
					  	  key: 'BC6BZ-352WQ-6OA5Z-BAJ7H-QVLJ5-52F2F'
					  	},
					  	success: (res) => {
					  						  console.log(res);
					  	  if (res.data.status === 0) {
					  	    this.address = res.data.result.address_component.city+res.data.result.address_component.district;
					  	  } else {
					  	    console.log('逆地理编码失败', res.data.message);
					  	  }
					  	},
					  	fail: (err) => {
					  	  console.log('逆地理编码请求失败', err);
					  	}
					  })
			       // this.address = '经度: ' + res.longitude + '，纬度: ' + res.latitude+res.name;
			      },
			      fail: (err) => {
			        console.log('获取位置信息失败', err);
			      },
				  
			    });
			
		},
		
		onPageScroll(e) {
			this.isHeader = e.scrollTop > 25 ? true : false
		},
	}
</script>

<style lang="scss" scoped>
	.select-box {
		border: 1rpx solid #ea3457;
		border-radius: 100rpx;
		height: 68rpx;
	}

	.recommend-tap {
		width: 66rpx;
		height: 30rpx;
		background-image: url('/static/images/ico/tag-1.png');
		background-size: 100% 100%;
		flex: 0 0 66rpx;
	}

	.tj-box {
		position: absolute;
		top: 8rpx;
		right: -60rpx;
		width: 200rpx;
		transform: rotate(30deg);
	}
</style>
